<!-- 创建时间: 2020年12月26日 星期六 21:43 -->
<template>
    <div class="myExamination_container">
        <div class="message"
             v-show="examinationInfo.length == 0">暂无考试</div>
        <el-row :gutter="20">
            <el-col :xs="24"
                    :sm="12"
                    :md="6"
                    v-for="(item, index) in examinationInfo"
                    :key="index">
                <el-card class="box-card">
                    <div class="test">{{ item[0] }}</div>
                    <p></p>
                    <el-tag>{{ item[1] }}</el-tag> -
                    <el-tag type="danger">{{ item[2] }}</el-tag>
                    <p></p>
                    <el-tooltip v-if="item[3] == 'null'"
                                class="item"
                                effect="dark"
                                content="教师未添加试题无法开考"
                                placement="top">
                        <el-tag type="danger"
                                round>无法开考</el-tag>
                    </el-tooltip>
                    <el-tag v-else-if="item[3] == 'noExamination'">等待开考</el-tag>
                    <el-tag v-else-if="item[3] == 'isAnswer'">你已完成本次考试</el-tag>
                    <el-button v-else
                               type="primary"
                               @click="openDialog(item[3], item[2], item[0])">开始考试</el-button>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog title="温馨提示"
                   :visible.sync="centerDialogVisible"
                   :before-close="dialogBeforeClose"
                   width="30%"
                   center>
            <div class="main">
                *请考生们注意<strong>在考试过程中，为防止切屏、多屏搜索等作弊行为。</strong>
                <ul style="list-style-type: decimal;">
                    <li>进入开始考试后，<strong>将无法退出考试</strong>。</li>
                    <li>进入考试后，将只能在<strong>当前活动页面作答，超过2次后，将视为作弊行为，本场考试记做0分处理。</strong></li>
                </ul>
            </div>

            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="cancelExamination()"
                           style="width: 74px">取 消</el-button>
                <el-button style="width: 74px"
                           type="primary"
                           :disabled="dialogBtnDisabled"
                           @click="startExamination()">{{dialogBtnDisabled?dialogBtnDisabledSecond+'s':'确 定'}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data () {
        //这里存放数据
        return {
            userName: "",
            userNumebr: "",
            examinationInfo: [], // 考试信息列表
            centerDialogVisible: false,
            startExaminationInfo: {
                questionBank: '',
                endTime: '',
                coursesName: ''
            },
            dialogBtnDisabled: true,
            dialogBtnDisabledSecondDefault: 3,
            dialogBtnDisabledSecond: 3,
            dialogInterval: null,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 自动获取考试信息
        autoGetExaminationInfo () {
            if (
                this.userNumebr == "" ||
                this.userName == "" ||
                !JSON.parse(sessionStorage.getItem("flag"))
            )
                return;
            let classNumber = this.userNumebr.substring(0, 7);
            this.$http
                .post("autoGetExaminationInfo", {
                    classNumber: classNumber,
                    studentNumber: this.$store.getters.getUserNumber,
                })
                .then((res) => {
                    if (res.bodyText != "") {
                        let arr = JSON.parse(res.bodyText);
                        for (let i = 0; i < arr.length; i++) {
                            this.examinationInfo[i] = arr[i].split(",");
                        }
                        this.$forceUpdate();
                    }
                });
        },
        // 开始考试前，打开考前阅读对话框
        openDialog (questionBank, endTime, coursesName) {
            this.centerDialogVisible = true;
            this.startExaminationInfo.questionBank = questionBank;
            this.startExaminationInfo.endTime = endTime;
            this.startExaminationInfo.coursesName = coursesName;
            this.dialogInterval = setInterval(() => {
                this.dialogBtnDisabledSecond -= 1;
                if (this.dialogBtnDisabledSecond <= 0) {
                    this.dialogBtnDisabled = false;
                    clearInterval(this.dialogInterval);
                }
            }, 1000);
        },
        // 开始考试前，确认考前阅读
        startExamination () {
            this.cancelExamination();
            this.$store.commit("setStartExaminationNumber", this.startExaminationInfo.questionBank);
            this.$store.commit("setEndTime", this.startExaminationInfo.endTime);
            this.$router.push({
                path: "/student/startExamination",
                query: {
                    coursesName: this.startExaminationInfo.coursesName
                },
            });
        },
        cancelExamination () {
            // 关闭dialog
            this.centerDialogVisible = false;
            // 禁用确定按钮
            this.dialogBtnDisabled = true;
            // 重置秒数
            this.dialogBtnDisabledSecond = this.dialogBtnDisabledSecondDefault;
            // 停止定时器
            clearInterval(this.dialogInterval);
            // 清空定时器
            this.dialogInterval = null;
        },
        // 学生阅读考前提示信息后的取消操作
        dialogBeforeClose (done) {
            this.cancelExamination();
            done();
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {
        this.userName = this.$store.getters.getUserName;
        this.userNumebr = this.$store.getters.getUserNumber;
        this.autoGetExaminationInfo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () { },
    //当data中定义的数据有变化时就会加载updated方法
    updated () { },
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.myExamination_container {
    padding: 10px 10px;

    .message {
        text-align: center;
        font-size: 20px;
        color: darkgray;
    }

    .box-card {
        text-align: center;
        justify-content: center;

        .test {
            width: 100px;
            line-height: 100px;
            border-radius: 50px;
            background: #409eff;
            margin: auto;
            font-size: 20px;
            color: white;
        }
    }

    .box-card:hover {
        border: 1px solid sandybrown;
    }
}
</style>
